<template>
    <div>
        <Tabs :value="tabName" type="card" @on-click="onClick">
            <TabPane label="新闻标题" name="name1">
                <Tree :data="data1" class="tree" @on-select-change="onSelectChange"></Tree>
                <Button type="success" @click="onAdd">添加</Button>
                <Button type="error" @click="onDeletes">删除多条新闻</Button>
                <Input v-model="filter.cateId" class="search">
                <Button slot="append" icon="ios-search" @click="onSearch"></Button>
                </Input>
                <Input v-model="filter.title" class="search1">
                <Button slot="append" icon="ios-search" @click="onSearch"></Button>
                </Input>
                <Table border :columns="columns" :data="filter.list"             @on-selection-change="onSelectionChange" class="table"></Table>
                <Page :total="filter.total" size="small" class="page"
                        show-total show-elevator show-sizer
                        @on-change="onChange"
                        @on-page-size-change="onPageSizeChange">
                </Page>
            </TabPane>
            <TabPane label="评论新闻" name="name2">
                <Form :model="formLeft" label-position="left" :label-width="100">
                    <FormItem label="新闻标题">
                        <Input v-model="formLeft.input1"></Input>
                    </FormItem>
                    <FormItem label="新闻内容">
                        <Input v-model="formLeft.input2"></Input>
                    </FormItem>
                </Form>
                <Form ref="formValidate" :model="formValidate":label-width="80">
                    <FormItem label="用户名ID" prop="commentId">
                        <Input v-model="formValidate.commentId"></Input>
                    </FormItem>
                    <FormItem label="标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                    </FormItem>
                    <!--<label>评论内容</label>-->
                    <FormItem label="评论内容" prop="content">
                        <Input v-model="formValidate.content"></Input>
                        <quill-editor v-model="formValidate.content">
                        </quill-editor>
                    </FormItem>
                    <FormItem label="评论时间" prop="time" style="padding-top:20px">
                        <Input v-model="formValidate.time"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit1('formValidate')" style="margin-left: 100px">提交</Button>
                        <Button type="ghost" @click="handleReset1('formValidate')" style="margin-left: 500px">重置</Button>
                    </FormItem>
                </Form>
                <Button type="error" @click="onDeletes1" class="btn">删除多条评论</Button>
                <!--<Input v-model="filter.cateId" class="search">-->
                <!--<Button slot="append" icon="ios-search" @click="onSearch"></Button>-->
                <!--</Input>-->
                <!--<Input v-model="filter.title" class="search2">-->
                <!--<Button slot="append" icon="ios-search" @click="onSearch1"></Button>-->
                <!--</Input>-->
                <Table border :columns="columns1" :data="filter.list1" class="table"
                        @on-selection-change="onSelectionChange1"></Table>
                <Page :total="filter.total1" size="small" class="page1"
                        show-total show-elevator show-sizer
                        @on-change="onChange1"
                        @on-page-size-change="onPageSizeChange1">
                </Page>
            </TabPane>
        </Tabs>
        <Modal
                v-model="modal"
                title="数据操作">
            <Form ref="formValidate" :model="formValidate" :label-width="80">
                <FormItem label="标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <Input v-model="formValidate.content" placeholder="请输入内容"></Input>
                </FormItem>
                <FormItem label="新闻图片" prop="pic">
                    <Input v-model="formValidate.pic"></Input>
                    <quill-editor v-model="formValidate.pic">
                    </quill-editor>
                </FormItem>
                <FormItem label="cateId" prop="cateId">
                    <Input v-model="formValidate.cateId"></Input>
                </FormItem>
                <FormItem label="时间" prop="date">
                    <Input v-model="formValidate.date"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary"
                            @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost"
                            @click="handleReset('formValidate')"
                            style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import Base from '../../common/Base';
    export default {
        mixins : [Base],
        data () {
            return {
                formLeft: {
                    input1: '',
                    input2: '',
                },
                content:'',
                tabName:'',
                comId:'',
                title:'',
                newsTitle:'',
                newsContent:'',
                module : 'news',
                formValidate : {
                    title : '',
                    content : '',
                },
                columns : [
                    {
                        type : 'selection',
                        width : 60,
                        align : 'center'
                    },
                    {
                        title : '新闻图片',
                        key : 'pic',
                        type:'html'
                    },
                    {
                        title : '标题',
                        key : 'title'
                    },
                    {
                        title : '评论数',
                        align:'center',
                        width:75,
                        key : 'commentCount'
                    },
                    {
                        title : '时间',
                        width:135,
                        align:'center',
                        key : 'date'
                    },
                    {
                        title : '操作',
                        key : 'action',
                        width : 170,
                        align : 'center',
                        render : (h, params) =>{
                            return h('div', [
                                h('Button', {
                                    props : {
                                        type : 'primary',
                                        size : 'small'
                                    },
                                    style : {
                                        marginRight : '5px'
                                    },
                                    on : {
                                        click : () =>{
                                            this.show(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props : {
                                        type : 'error',
                                        size : 'small'
                                    },
                                    on : {
                                        click : () =>{
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props : {
                                        type : 'primary',
                                        size : 'small'
                                    },
                                    style : {
                                        marginLeft : '5px'
                                    },
                                    on : {
                                        click : () =>{
                                            var d = new Date();
                                            var m1="/";
                                            var m2=":";
                                            var timer=d.getFullYear()+m1+parseInt(d.getMonth()+1)+m1+d.getDate()+" "+d.getHours()+m2+d.getMinutes();
                                            this.tabName='name2';
                                            console.log(params.row);
                                            this.formLeft.input1 = params.row.title;
                                            this.formLeft.input2 = params.row.content;
                                            this.formValidate.commentId = params.row._id;
                                            this.formValidate.time = timer;
                                            this.formValidate.title = '';
                                            this.formValidate.content = '';
                                            this.comId = params.row._id;
                                            this.getData1();
                                        }
                                    }
                                }, '评论'),
                            ]);
                        }
                    }
                ],
                columns1 : [
                    {
                        type : 'selection',
                        width : 60,
                        align : 'center'
                    },
                    {
                        title : '_Id',
                        width:150,
                        key : '_id',
                    },
                    {
                        title : '标题',
                        width: 145,
                        key : 'title'
                    },
                    {
                        title : '评论内容',
                        width: 150,
                        key : 'content',
                        type:'html'
                    },
                    {
                        title : '时间',
                        width:140,
                        key : 'time'
                    },
                    {
                        title : '操作',
                        key : 'action',
                        width : 150,
                        align : 'center',
                        render : (h, params) =>{
                            return h('div', [
                                h('Button', {
                                    props : {
                                        type : 'error',
                                        size : 'small'
                                    },
                                    on : {
                                        click : () =>{
                                            this.remove1(params.row._id)
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
                data1: [],
            }
        },
        methods:{
            onClick(tabs){
                this.getData();
                this.tabName = tabs;
            },
            getData1(){
                this.$http.get(`http://localhost:3000/comment/data/comment/` + this.comId,this.filter)
                    .then(res=>{
                        console.log(res);
                        this.filter.list1 = res.data;
                        this.filter.total1 = res.data.total;
                        this.filter.page1 = res.data.page;
                    })
            },
            getTree(){
              this.$http.get('http://localhost:3000/cate/list/1')
                  .then(res=>{
                      console.log(res.data);
                      this.data1 = res.data;
                  })
          },
          onSelectChange(res){
              console.log(res);
              this.filter.cateId = res[0]._id;
              this.onSearch();

              this.formValidate.cateId = res[0]._id;
              //时间
              var d = new Date();
              var m1="/";
              var m2=":";
              var time=d.getFullYear()+m1+parseInt(d.getMonth()+1)+m1+d.getDate()+" "+d.getHours()+m2+d.getMinutes();
              console.log(time);
              this.formValidate.date = time;
          },

            onChange1(page){
                this.filter.page = page;
                this.getData1();
            },
            onPageSizeChange1(pageSize){
                this.filter.limit = pageSize;
                this.getData1();
            },
            onSearch1(){
                this.getData1();
            },
            onDeletes1(){
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除该记录吗？</p>',
                    onOk: () => {
                        this.$http.post(`http://localhost:3000/comment/deletes`,{ids:this.ids.toString()})
                            .then(res=>{
                                console.log(res);
                                this.$Message.info('删除数据成功');
                                this.getData1();
                            })
                    },
                    onCancel: () => {
                    }
                });
            },
            onSelectionChange1(selection){
                if(selection && selection.length>0){
                    var ids = [];
                    let selectionLen = selection.length;
                    for(var i=0;i<selectionLen;i++){
                        ids.push(selection[i]._id);
                    }
                    this.ids = ids;
                }
            },
            remove1 (id) {
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除该记录吗？</p>',
                    onOk: () => {
                        this.$http.delete(`http://localhost:3000/comment/data/${id}`)
                            .then(res=>{
                                this.$Message.info('删除数据成功');
                                this.getData1();
                            })
                    },
                    onCancel: () => {
                    }
                });
            },
            handleSubmit1(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate._id && this.formValidate._id.length>0){
                            this.$http.put(`http://localhost:3000/comment/data/${this.formValidate._id}`,this.formValidate)
                                .then(res=>{
                                    this.$Message.success('提交成功!');
                                    this.modal = false;
                                    this.getData1();
                                })
                        }else{
                            this.$http.post(`http://localhost:3000/comment/data`,this.formValidate)
                                .then(res=>{
                                    this.$Message.success('提交成功!');
                                    this.modal = false;
                                    this.getData1();
                                })
                        }
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset1(name){
                this.$refs[name].resetFields();
            },
        },
        created(){
            this.getTree();
            //this.getData1();
        }
    }
</script>
<style>
    .tree{
        width:146px;
        float:left;
    }
    .btn{
        margin-left:146px;
    }
    .search{
        width:800px;
        display:none;
     }
    .search1{
        width:400px;

    }
    .table{
        width:800px;
        margin-left:146px;
    }
    .page{
        margin-left:146px;
    }
    .page1{
        margin-left:146px;
        padding-bottom:150px;
    }

</style>
